<template>
	<view class="login_box">
		<image class="Max" src="@/static/logo.png" mode=""></image>
		<view class="input_box">
			<input type="number" placeholder="请输入手机号码" placeholder-style="color:#f4f4f5" v-model="phone">
			<view class="password" v-if="state">
				<input v-if="is_show" type="text" placeholder="请输入密码" placeholder-style="color:#f4f4f5" v-model="Login_pwd">
				<input v-else type="password" placeholder="请输入密码" placeholder-style="color:#f4f4f5" v-model="Login_pwd">
				<view class="showIcon" @click="showPassword">
					<u-icon v-if="is_show" name="eye-off" color="#909399" size="24"></u-icon>
					<u-icon v-else name="eye-fill" color="#2979ff" size="24"></u-icon>
				</view>
			</view>
			<view class="yzm_box" v-else>
				<input type="safe-password" placeholder="请输入手机验证码" placeholder-style="color:#f4f4f5" v-model="code">
				<text @click="getCode()">{{codetext}}</text>
			</view>
		</view>
		<!-- 验证码登录 -->
		<view class="login_button" @click="empty" v-if="state">登录</view>
		<!-- 密码登录 -->
		<view class="login_button" @click="empty" v-else>登录</view>
		<text class="login_switch" @click="change()">{{btntext}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: true, //登录选择切换
				btntext: '验证码登录', //登录选择
				codetext: '获取验证码',
				isDisabled: true,
				phone: '',
				code: '',
				Login_pwd: '',
				is_show: false,
				versions: '',
				device_id: '',
				device_model: '',
				brand: '',
				os_name: '',
				os_version: '',
				login_type: 1,
			}
		},
		onLoad() {
			var _this = this
			uni.getSystemInfo({
			    success: function (res) {
					_this.versions = res.appVersion
					_this.device_id = res.deviceId
					_this.device_model = res.deviceModel
					_this.brand = res.brand == undefined ? '' : res.brand
					_this.os_name = res.osName
					_this.os_version = res.osVersion
			    }
			});
		},
		methods: {
			// 切换登录方式
			change() {
				this.state = !this.state
				if (this.state) {
					this.login_type = 2
					this.btntext = '验证码登录'
				} else {
					this.login_type = 1
					this.btntext = '密码登录'
				}
			},
			//判断是否为空
			empty() {
				if (this.state) {
					if (this.Login_pwd != '' && this.phone != '') {
						this._loginpwd()
					} else {
						uni.showToast({
							title: '请输入手机号和密码',
							icon: "none"
						});
					}
				}else{
					if (this.code != '' && this.phone != '') {
						this._logincode()
					} else {
						uni.showToast({
							title: '请输入手机号和验证码',
							icon: "none"
						});
					}
				}

			},
			// 获取验证码
			getCode() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				let that = this;
				// 防止多次重复点击
				if (!that.isDisabled) {
					return false;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.phone))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.codetext = "发送中..." //发送验证码
				this.isDisabled = false;
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					this.setTimer();
				}, 1000)
			},
			// 获取验证
			setTimer() {
				this.V_Code()
			},
			// 发送验证码
			async V_Code() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/send',
					data: {
						mobile: this.phone,
						event: 'login'
					},
				});
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					clearInterval(this.getCode());
					let holdTime = 60; //定义变量并赋值
					this.codetext = "重新获取(60)"
					//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
					//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
					this.Timer = setInterval(() => {
						if (holdTime <= 0) {
							this.isDisabled = true;
							this.getCodeBtnColor = "#ffffff";
							this.codetext = "获取验证码"
							clearInterval(this.Timer); //清除该函数
							return; //返回前面
						}
						this.codetext = "重新获取(" + holdTime + ")"
						holdTime--;
					}, 1000)
				} else {
					this.isDisabled = true;
					this.getCodeBtnColor = "#ffffff";
					this.codetext = "获取验证码"
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
				}
			},
			// 登录(密码)
			async _loginpwd() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'user/login',
					data: {
						phone: this.phone,
						password: this.Login_pwd,
						login_type: this.login_type,
						versions: this.versions,
						device_id: this.device_id,
						device_model: this.device_model,
						brand: this.brand,
						os_name: this.os_name,
						os_version: this.os_version
					},
				});
				if (res.code == 200) {
					uni.setStorageSync('userinfo', res.data);
					uni.setStorageSync('Token', res.data.token);
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
				}
			},
			// 登录(验证码)
			async _logincode() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'user/mobilelogin',
					data: {
						phone: this.phone,
						captcha: this.code,
						login_type: this.login_type,
						versions: this.versions,
						device_id: this.device_id,
						device_model: this.device_model,
						brand: this.brand,
						os_name: this.os_name,
						os_version: this.os_version
					},
				});
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
				} else {
					uni.setStorageSync('userinfo', res.data);
					uni.setStorageSync('Token', res.data.token);
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			// 显示密码
			showPassword() {
				if (!this.is_show) {
					this.is_show = true
				} else {
					this.is_show = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
	}
	
	.login_box {
		min-height: 100vh;
		padding: 150rpx 70rpx 70rpx 70rpx;
		box-sizing: border-box;
		background-image: url('/static/APP-bj.jpg');
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		// background-image: linear-gradient(#fff, #e7f6f4);

		.login_img {
			width: 300rpx;
			height: 119rpx;
			margin-top: 50rpx;
			margin-bottom: 160rpx;
			float: left;
			
			text {
				display: block;
				width: 100%;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 56rpx;
			}
		}

		.Max {
			width: 300rpx;
			height: 300rpx;
			margin-bottom: 50rpx;
			margin-right: auto;
			margin-left: auto;
			display: block;
		}

		.input_box {
			border-radius: 15rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			input {
				width: 90%;
				padding: 15rpx;
				height: 100rpx;
				box-sizing: border-box;
				border: #dddddf solid 1px;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
			}
			
			.password {
				position: relative;
				width: 90%;
				
				input {
					width: 100%;
				}
				
				.showIcon {
					position: absolute;
					top: 28rpx;
					right: 30rpx;
				}
			}

			.yzm_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 90%;

				input {
					width: 70%;
				}
				
				input::placeholder {
					color: #fff !important;
				}

				text {
					color: #fff;
					font-size: 24rpx;
					display: block;
					margin-right: 15rpx;
				}
			}
		}

		.login_button {
			background-color: #018afe;
			width: 100%;
			border-radius: 15rpx;
			font-size: 28rpx;
			padding: 30rpx;
			box-sizing: border-box;
			color: #fff;
			text-align: center;
			margin-top: 60rpx;
			transition: all 0.5s;
		}

		.login_button:active {
			opacity: 0.8;
		}

		.login_switch {
			display: block;
			margin-top: 38rpx;
			width: 100%;
			text-align: center;
			color: #ffffff;
			font-size: 24rpx;
		}
	}
</style>